<template>
  <div class="app-container">
    <div style="color:red;text-align:center">*注意默认查询的是全部的统计数据，如果要查询其它的，请选择范围查询</div>
    <br>
    <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
      <el-tab-pane label="检查项目列表" name="check">
        <!-- 查询条件开始 -->
        <el-form ref="queryCheckFrom" :model="queryCheckParams" :inline="true" label-width="68px">
          <el-form-item label="项目名称" prop="checkItemId">
            <el-select
                v-model="queryCheckParams.checkItemId"
                placeholder="请选择项目名称"
                clearable
                size="small"
                style="width:180px"
            >
              <el-option
                  v-for="d in checkItemOptions"
                  :key="d.checkItemId"
                  :label="d.checkItemName"
                  :value="d.checkItemId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="患者名称" prop="patientName">
            <el-input
                v-model="queryCheckParams.patientName"
                placeholder="请输入患者名称"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="交易时间" prop="createTime">
            <el-date-picker
                v-model="queryCheckParams.createTime"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholde="开始日期"
                end-placeholde="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCheckQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetCheckQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table border :data="checkList">
          <el-table-column label="检查项目ID" prop="checkItemId" align="center" />
          <el-table-column label="检查项目名称" prop="checkItemName" align="center" />
          <el-table-column label="项目价格" prop="price" align="center" />
          <el-table-column label="患者姓名" prop="patientName" align="center" />
          <el-table-column label="检查状态" prop="resultStatus" align="center" :formatter="checkStatusFormatter" />
          <el-table-column label="创建时间" prop="createTime" align="center" />
          <el-table-column label="创建人" prop="createBy" align="center" />
        </el-table>
        <!-- 数据结束结束 -->

        <!-- 分页控件开始 -->
        <el-pagination
            v-show="queryCheckParams.total>0"
            :current-page="queryCheckParams.pageNum"
            :page-sizes="[5,10, 15, 20]"
            :page-size="queryCheckParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryCheckParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->


      </el-tab-pane>
      <el-tab-pane label="检查项目统计列表" name="checkStat">
        <!-- 查询条件开始 -->
        <el-form ref="queryCheckStatFrom" :model="queryCheckStatParams" :inline="true" label-width="68px">
            <el-form-item label="项目名称" prop="checkItemId">
              <el-select
                  v-model="queryCheckStatParams.checkItemId"
                  placeholder="请选择项目名称"
                  clearable
                  size="small"
                  style="width:180px"
              >
                <el-option
                    v-for="d in checkItemOptions"
                    :key="d.checkItemId"
                    :label="d.checkItemName"
                    :value="d.checkItemId"
                />
              </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCheckStatQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetCheckStatQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table border :data="checkStatList" show-summary>
          <el-table-column label="检查项目ID" prop="checkItemId" align="center" />
          <el-table-column label="检查项目名称" prop="checkItemName" align="center" />
          <el-table-column label="总金额" prop="totalPrice" align="center" />
          <el-table-column label="检查次数" prop="itemNumber" align="center" />
        </el-table>
        <!-- 数据结束结束 -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 被激活的tab名称
      activeName: 'check',
      // 检查项目总销售数据
      checkList: [],
      // 检查项目的销售数量数据
      checkStatList: [],
      // 日期范围
      dateRange: [],
      // 列表查询参数
      queryCheckParams: {
        pageNum: 1, // 当前页码
        pageSize: 5, // 每页显示记录数
        total: 0, // 总记录数
        patientName: undefined,// 患者名称
        checkItemId: undefined,// 做的检查项目ID
        createTime:undefined,// 交易时间
      },
      total: 0,
      // 数量统计查询参数
      queryCheckStatParams: {
        checkItemId: undefined,
        createTime:undefined,
        itemId:undefined
      },
      // 所有的检查项目
      checkItemOptions: [],
      // 检查状态字典数据
      resultStatusOptions: []
    }
  },
  created() {
    // 默认查询销售列表
    this.listCheck();
    this.listCheck1();
    this.checkResultStatus();
  },
  methods: {
    // 点击tab事件
    handleClick() {
      // console.log(this.activeName)
      if (this.activeName === 'check') {
        this.listCheck()
      } else {
        this.listCheckStat()
      }
    },
    // 查询销售列表
    listCheck() {
      this.$http.post("/checkResult/check/list", this.queryCheckParams).then(res => {
        //console.log(res.data.data.list)
        this.checkList = res.data.data.list
        this.queryCheckParams.total = res.data.data.total
      })
    },
    // 查询销售列表--根据项目名称搜索
    listCheck1(){
      this.$http.post("/checkItem/check/list1").then(res => {
        //console.log(res.data.data)
        if (res.data.code === 200) {
          this.checkItemOptions = res.data.data
        }
      })
    },
    //检查单详情状态字典数据--检查状态
    checkResultStatus() {
      this.$http.get("/checkResult/checkStatus?dictType="+"his_check_result_status").then(res => {
        this.resultStatusOptions=res.data.data
      })
    },
    // 翻译检查单详情状态
    checkStatusFormatter(row) {
      let resultStatusLabel = "待检查";
      this.resultStatusOptions.filter(item => {
        if (parseInt(item.dictValue) === parseInt(row.resultStatus)) {
          resultStatusLabel = item.dictLabel
        }
      })
      return resultStatusLabel;
    },
    // 销售列表查询
    handleCheckQuery() {
      this.listCheck()
    },
    // 重置销售列表查询
    resetCheckQuery() {
      this.queryCheckParams = {
        pageNum: 1, // 当前页码
        pageSize: 5, // 每页显示记录数
        patientName: undefined,// 患者名称
        checkItemId: undefined,// 做的检查项目ID
        createTime:undefined,// 交易时间
      }
      this.listCheck()
    },
    // 查询销售列表
    listCheckStat() {
      this.$http.post("/checkResult/check/listStat", this.queryCheckStatParams).then(res => {
       // console.log(res.data)
        if (res.data.code === 200) {
          this.checkStatList = res.data.data.data
          console.log(this.checkStatList)
        }
      })
    },
    // 销售列表查询
    handleCheckStatQuery() {
      this.listCheckStat()
    },
    // 重置销售列表查询
    resetCheckStatQuery() {
      this.queryCheckStatParams = {}
      this.listCheckStat()
    },
    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryCheckParams.pageSize = val;
      // 重新查询
      this.listCheck();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryCheckParams.pageNum = val;
      // 重新查询
      this.listCheck();
    },
  }
}
</script>
